body {
	font-family: "微软雅黑";
	display: flex;
	padding: 0;
	margin: 0;
	background-image: url(../images/bg.png);
	background-size: 100% auto;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.container {
	width: 60%;
	margin: auto;
	height: 400px;
	box-shadow: 1px 1px 5px black;
}

.row {
	display: flex;
	width: 100%;
	height: 400px;
}

.item-1 {
	background: white;
	display: flex;
	flex: 0 0 60%;
}

.item-2 {
	display: flex;
	flex: 0 0 40%;
}

.item {
	display: block;
	text-align: center;
}
.img1 {
	cursor: pointer;
	position: absolute;
	top:27px;
	left:50px;
	bottom: 0;
	right: 0;
}

.img2 {
	cursor: pointer;
	position: absolute;
	top:87px;
	left:50px;
	bottom: 0;
	right: 0;
}
.item p{
	position: relative;
}
input {
	margin-top: 20px;
	padding-left: 40px;
	background-color: #fafafa;
	border: none;
	border-radius: 2px;
	width: 400px;
	height: 40px;
	outline-color: white;
}

input:hover {
	border-radius: 4px;
	outline-color: white;
	transition: 0.5s;
}

input:focus {
	border-radius: 4px;
	outline-color: #7554BF;
	transition: 0.5s;
}

.container .row .item-1 a {
	margin-top: 30px;
	border-radius: 4px;
	color: white;
	text-decoration: none;
	background: #7554bf;
	display: inline-block;
	width: 250px;
	line-height: 35px;
	transition: 0.2s;
}

.container .row .item-1 a:active {
	border-radius: 4px;
	border: 1px solid #7554BF;
	background-color: white;
	color: #7554BF;
}

.item-2 {
	padding-top: 50px;
}

.item-2 a {
	margin-top: 30px;
	line-height: 40px;
	display: inline-block;
	color: white;
	text-decoration: none;
	padding-right: 30px;
	background: url(../images/youjiantou.png) no-repeat right center;
}

.item-2 a:hover {
	text-decoration: underline;
}

@media (max-width:600px) {
	.container {
		width: 100%;
	}
	input{
		width: 200px;
	}
	.row {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.item-1 {
		padding-bottom: 50px;
	}
	.item-2 {
		padding-bottom: 50px;
	}
	.item{
		flex-grow:1;
	}
}